import styled, { css, CSSObject } from 'styled-components';
import { TStyledCheckboxRadio, TStyledLabel } from './CheckboxRadio.types';
import {
    CHECKBOXRADIO_COLORS,
    CHECKBOXRADIO_DIMENSIONS,
    DEFAULT_CHECKBOXRADIO_DIMENSION,
    DEFAULT_FONT_CHECKBOXRADIO_DIMENSION,
    FONT_CHECKBOXRADIO_DIMENSION
} from './CheckboxRadio.constants';
import IconCheck from '../../../images/check.svg';
import IconMinus from '../../../images/minus.svg';
import { hexToRgba } from './functions';

/**
 * Компонент стилизованного чекбокса.
 * @property {IStyledCheckbox} props - Свойства компонента.
 */
export const StyledCheckboxRadio = styled.input<TStyledCheckboxRadio>`
  position: absolute;
  z-index: -1;
  opacity: 0;
  
  /* Стили подписи к кнопке */
  & + label {
    display: inline-flex;
    user-select: none;
    font-family: 'Helvetica Neue Light';
    font-size: ${props => FONT_CHECKBOXRADIO_DIMENSION[props.dimension] ?? DEFAULT_FONT_CHECKBOXRADIO_DIMENSION};
    ${props =>
        props.inlineStyle &&
        css`
        ${props.inlineStyle as CSSObject};
      `}
  }

  /* Общие стили внешнего вида кнопки */
  & + label::before {
    content: '';
    box-sizing: border-box;
    width: ${props => CHECKBOXRADIO_DIMENSIONS[props.dimension]?.width || DEFAULT_CHECKBOXRADIO_DIMENSION.width};
    height: ${props => CHECKBOXRADIO_DIMENSIONS[props.dimension]?.height || DEFAULT_CHECKBOXRADIO_DIMENSION.height};
    border: 0.0625rem solid ${props => props.coloration ?? CHECKBOXRADIO_COLORS.default};
    margin-right: 0.5rem;
    cursor: pointer; 
  }

  ${props => props.type === 'checkbox' && css`
    /* Стили для кнопки типа checkbox */
    & + label::before {
      border-radius: 0.25rem;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: ${CHECKBOXRADIO_DIMENSIONS[props.dimension]?.width || DEFAULT_CHECKBOXRADIO_DIMENSION.width} ${CHECKBOXRADIO_DIMENSIONS[props.dimension]?.height || DEFAULT_CHECKBOXRADIO_DIMENSION.height};
    }
  `};

  /* Стили кнопки с типом radio */
  ${props => props.type === 'radio' && css`
      & + label::before {
        border-radius: 50%;
        border-color: ${props.coloration};
      }
  `}

  ${props =>
        props.hint &&
        css`
      /* Стили всплывающей подсказки */    
      &:hover + label::after {
        content: '${props.hint}';
        padding: 0.1875rem;
        position: absolute;
        border-radius: 0.1875rem;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: ${CHECKBOXRADIO_COLORS.disabled};
        font-size: 0.75rem;
        transform: translate3d(210%, -50%, 0);
        z-index: 2;
      }
    `};

  /* Общие стили при фокусе на кнопке */  
  &:focus + label::before {
    border-color: ${props => props.coloration ?? CHECKBOXRADIO_COLORS.default};
    outline: none;
    box-shadow: 0 0 3px 2px ${props => hexToRgba(props.coloration ?? CHECKBOXRADIO_COLORS.default, 0.5)};
  }

  /* Стили для не нажатой кнопки типа radio в фокусе */
  ${props =>
        props.type === 'radio' &&
        css`
      &:focus:not(:checked) + label::before {
        border-color: ${'#DEE2E6'};
        outline: none;
        border-width: ${'0.0625rem'};
        box-shadow: 0 0 3px 2px ${hexToRgba('#DEE2E6', 0.5)};
      }
  `}

  ${props => props.type === 'radio' && css`
      /* Стили для кнопки типа radio*/
      & + label::before {
        border-color: ${CHECKBOXRADIO_COLORS.disabled};
        border-width: 0.0625rem;
        box-sizing: border-box;
      }
  `};

  /* Стили для кнопки типа checkbox со свойством indeterminate */
  ${props =>
        props.indeterminate &&
        props.type === 'checkbox' &&
        css`
      & + label::before {
        border-color: ${props.coloration ?? CHECKBOXRADIO_COLORS.default};
        background-color: ${props.coloration ?? CHECKBOXRADIO_COLORS.default};
        background-image: url(${IconMinus});

      }
  `}
  
  /* Общие стили для нажатой кнопки */
  &:checked + label::before {
      box-sizing: border-box;
  }
  
  /* Стили для нажатой кнопки типа checkbox */
  ${props => props.type === 'checkbox' && css`
      &:checked + label::before {
        background-image: url(${IconCheck});
        border-color: ${props.coloration ?? CHECKBOXRADIO_COLORS.default};
        background-color: ${props.coloration ?? CHECKBOXRADIO_COLORS.default};
      } 
  `}
  
  /* Стили для нажатой кнопки типа radio */
  ${props => props.type === 'radio' && css`
      &:checked + label::before {
        border-width: 0.1875rem;
        border-color: ${props.coloration ?? CHECKBOXRADIO_COLORS.default};
      }
  `}

  /* Стили для отключенной кнопки типа checkbox */
  ${props => props.type === 'checkbox' && css`
      &:disabled + label::before {
        background-color: ${CHECKBOXRADIO_COLORS.disabled};
        border-color: ${CHECKBOXRADIO_COLORS.disabled};
        cursor: auto;
      }
  `}

  /* Стили для нажатой отключенной кнопки типа radio*/
  ${props => props.type === 'radio' && props.checked && css`
      &:disabled + label::before {
        border-color: ${CHECKBOXRADIO_COLORS.disabled};
        border-width: 0.1875rem;
        box-sizing: border-box;
      }
  `}

  /* Стили для не нажатой отключенной кнопки типа radio */
  ${props => props.type === 'radio' && !props.checked && css`
      &:disabled + label::before {
        border-color: ${CHECKBOXRADIO_COLORS.disabled};
        background-color: ${CHECKBOXRADIO_COLORS.disabled};
        box-sizing: border-box;
      }
  `}
`;

/**
 * Компонент стилизованной метки.
 * @property {IStyledLabel} props - Свойства компонента.
 */
export const StyledLabel = styled.label<TStyledLabel>`
  color: #212529;
  align-items: center;
`;
